<template>
    <div class="container">
        <div class="post_container">
            <div class="title">
                <h3>{{post.title}}</h3>
            </div>
            <hr style= "border-top:none;border-bottom:none" />
            <hr style= "border-top:1px dashed #000;border-bottom:none" />
            <div class="attrs">
                <img style="cursor:pointer;background-size: cover;" :src="post.author.avatar" class="avatar" @click="toAuthor(post.author['_id'])">
                <span style="cursor:pointer" @click="toAuthor(post.author['_id'])">{{post.author.name}}</span>
                <span>发布于{{post.postDate | formateDate}}</span>
                <!-- 收藏 -->
                <img src="../../assets/coll.png" @click="doColl()" style="width:13px;height:13px;margin-left:10px;position:relative;top:-2px;cursor:pointer">
                <span style="color:#ff700a;margin-left:2px;cursor:pointer" @click="doColl()">收藏</span>
                <!-- 评论 -->
                <div class="heatdegree">
                    <img src="../../assets/component.png" style="width:20px;height:20px;margin-left:10px;">
                    <span>{{post.commentsCount}}</span>
                </div>
                <!-- 阅读量 -->
                <div class="heatdegree">
                    <img src="../../assets/pv.png" style="width:20px;height:20px;margin-left:10px;">
                    <span>{{post.readsCount}}</span>
                </div>
                <!-- 点赞 -->
                <div class="heatdegree">
                    <img @click="doGreat" :src="isGreatd?require('../../assets/greated.png'):require('../../assets/great.png')" style="width:20px;height:20px;margin-left:10px;">
                    <span>{{post.greatsCount}}</span>
                </div>
            </div>
            <hr style= "border-top:1px #ccc solid;border-bottom:none" />
            <div class="post_content" v-html="post.content">
            </div>
        </div>
        <!-- 评论 -->
        <Comment :post="post"/>
    </div>
    
</template>

<script>
import { Message } from 'element-ui';
import Comment from './Comment';
export default {
    name:'Post',
    components:{
        Comment,
    },
    // props:['post'],
    data(){
        return {
            post:{},
            isGreatd:false,
        }
    },
    methods:{
        //点赞
        doGreat(){
            this.$axios.post('/api/greats/doGreat',{
                post:this.post['_id'],
            })
            .then(res=>{
                if(res.data.ok==1){
                    Message.error("出错了！");
                }
                else if(res.data.ok==0){
                    Message.success({message:"点赞成功~~~",showClose:true});
                    this.post.greatsCount+=1;
                    this.isGreatd=true;
                }
                else{
                    Message.success({message:"已取消~~~",showClose:true});
                    this.post.greatsCount-=1;
                    this.isGreatd=false;
                }
            })
        },
        //收藏
        doColl(){
            this.$axios.post('/api/colls/doColl',{
                post:this.post['_id'],
            })
            .then(res=>{
                if(res.data.ok==1){
                    Message.error("出错了！");
                }
                else if(res.data.ok==0){
                    Message.success({message:"收藏成功~~~",showClose:true});
                }
                else{
                    Message.success({message:"已取消收藏~~~",showClose:true});
                }
            })
        },
        //跳转到作者页面
        toAuthor(authorId){
            this.$router.push(`/home/${authorId}`);
        }
    },
    // props:['post'],
    created(){
        // console.log(this.$route.query)
        // this.post=this.$store.getters.post;
        this.post=JSON.parse(this.$route.query.post);
        //获取是否点赞
        this.$axios.post('/api/greats/isExist',{
            post:this.post['_id'],
        })
        .then(res=>{
            this.isGreatd=res.data.isExist;
        })
        //是否增加阅读量
        this.$axios.post('/api/reads/doRead',{
            post:this.post['_id'],
        })
        .then(res=>{
            if(res.data.ok==0){
                this.post.readsCount+=1;
            }
        })
        
        
    }
}
</script>

<style scoped>
.container{
    width:100%;
    height:auto;
}
.post_container{
    width:100%;
    height:auto;
    box-sizing: border-box;
    border:1px solid #ccc;
    padding:20px 20px;
}
.title{
    padding:5px 5px 0 5px;
    height:auto;
}
a{
    text-decoration: none;
    color:#000;
}
.attrs{
    width:100%;
    height:25px;
    padding: 0 5px 5px 5px;
    position: relative;
    box-sizing: border-box;
}
.avatar{
    width:20px;
    height:20px;
    margin: auto;
    border-radius: 50% 50%;
}
.attrs span{
    font-size: 10px;
    color:#000;
    line-height: 1;
    margin-left:10px;
    position:relative;
    top:-5px;
}
.heatdegree{
    float:right;
    cursor: pointer;
}
.post_content{
    height:auto;
    width:100%;
}
</style>

